<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-01-03 10:48:38
 * @LastEditors:
 * @Description:
 * @FilePath: \wms-v2\src\ve\layout\extension\components\exSelect.vue
 * CIMC-V2
-->
<template>
  <el-popover placement="left-start" trigger="click" width="100">
    <div class="w-96">
      <el-tabs tab-position="top" type="card">
        <el-tab-pane v-for="(item, index) of listData" :key="index" class="grid gap-1 grid-cols-8 h-[200px] overflow-y-auto" :label="item.label">
          <vui-icon v-for="(v, i) of item.icon" :key="i" :icon="v" @click="clickIcon(v)" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #reference>
      <el-button>
        <vui-icon v-if="modelValue" :icon="modelValue" />
        {{ translateTitle('Ve.layout.选择') }}
        <vui-icon v-if="modelValue" icon="close-circle-line" @click="closeIcon" />
      </el-button>
    </template>
  </el-popover>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'UiIconSelect',
    components: {},
    props: {
      modelValue: {
        type: String,
        default: '',
      },
    },
    emits: ['update:modelValue'],
    data() {
      return {
        listData: [
          {
            label: '系统',
            icon: [
              'apps-line',
              'apps-fill',
              'function-line',
              'function-fill',
              'menu-line',
              'menu-2-line',
              'menu-3-line',
              'menu-5-line',
              'menu-add-line',
              'menu-fold-line',
              'menu-unfold-line',
              'more-fill',
              'more-2-fill',
              'star-s-line',
              'star-s-fill',
              'settings-line',
              'settings-fill',
              'settings-3-line',
              'settings-3-fill',
              'list-settings-line',
              'list-settings-fill',
              'information-line',
              'information-fill',
              'error-warning-line',
              'error-warning-fill',
              'question-line',
              'question-fill',
              'alert-line',
              'alert-fill',
              'checkbox-line',
              'checkbox-fill',
              'add-box-line',
              'add-box-fill',
              'checkbox-circle-line',
              'checkbox-circle-fill',
              'indeterminate-circle-line',
              'indeterminate-circle-fill',
              'add-circle-line',
              'add-circle-fill',
              'close-circle-line',
              'close-circle-fill',
              'checkbox-multiple-blank-line',
              'checkbox-multiple-blank-fill',
              'check-line',
              'check-fill',
              'close-line',
              'close-fill',
              'add-line',
              'add-fill',
              'subtract-line',
              'subtract-fill',
              'divide-line',
              'divide-fill',
              'arrow-left-up-line',
              'arrow-left-up-fill',
              'arrow-up-line',
              'arrow-up-fill',
              'arrow-right-up-line',
              'arrow-right-up-fill',
              'arrow-right-line',
              'arrow-right-fill',
              'arrow-right-down-line',
              'arrow-right-down-fill',
              'arrow-down-line',
              'arrow-down-fill',
              'arrow-left-down-line',
              'arrow-left-down-fill',
              'arrow-left-line',
              'arrow-left-fill',
              'arrow-up-circle-line',
              'arrow-up-circle-fill',
              'arrow-right-circle-line',
              'arrow-right-circle-fill',
              'arrow-down-circle-line',
              'arrow-down-circle-fill',
              'arrow-left-circle-line',
              'arrow-left-circle-fill',
              'arrow-up-s-line',
              'arrow-up-s-fill',
              'arrow-down-s-line',
              'arrow-down-s-fill',
              'arrow-right-s-line',
              'arrow-right-s-fill',
              'arrow-left-s-line',
              'arrow-left-s-fill',
              'arrow-left-right-line',
              'arrow-up-down-line',
              'arrow-go-back-line',
              'arrow-go-forward-line',
              'download-line',
              'download-fill',
              'upload-line',
              'upload-fill',
              'download-2-line',
              'download-2-fill',
              'upload-2-line',
              'upload-2-fill',
              'download-cloud-line',
              'download-cloud-fill',
              'upload-cloud-line',
              'upload-cloud-fill',
              'login-circle-line',
              'login-circle-fill',
              'logout-circle-line',
              'logout-circle-fill',
              'refresh-line',
              'refresh-fill',
              'delete-back-2-line',
              'delete-back-2-fill',
              'delete-bin-line',
              'delete-bin-fill',
              'lock-line',
              'lock-fill',
              'lock-unlock-line',
              'lock-unlock-fill',
              'eye-line',
              'eye-fill',
              'eye-off-line',
              'eye-off-fill',
              'search-line',
              'search-fill',
              'zoom-in-line',
              'zoom-in-fill',
              'zoom-out-line',
              'zoom-out-fill',
              'find-replace-line',
              'find-replace-fill',
              'share-line',
              'share-fill',
              'share-box-line',
              'share-box-fill',
              'share-forward-line',
              'share-forward-fill',
              'time-line',
              'time-fill',
              'alarm-line',
              'alarm-fill',
              'thumb-up-line',
              'thumb-up-fill',
              'thumb-down-line',
              'thumb-down-fill',
              'toggle-line',
              'toggle-fill',
              'filter-line',
              'filter-fill',
              'filter-3-line',
            ],
          },
          {
            label: '媒体',
            icon: [
              'image-line',
              'image-fill',
              'image-add-line',
              'image-add-fill',
              'video-line',
              'video-fill',
              'movie-2-line',
              'movie-2-fill',
              'camera-line',
              'camera-fill',
              'camera-lens-line',
              'camera-lens-fill',
              'music-2-line',
              'music-2-fill',
              'mic-line',
              'mic-fill',
              'mic-off-line',
              'mic-off-fill',
              'volume-down-line',
              'volume-down-fill',
              'volume-mute-line',
              'volume-mute-fill',
              'notification-3-line',
              'notification-2-fill',
              'notification-off-line',
              'notification-off-fill',
              'play-circle-line',
              'play-circle-fill',
              'pause-circle-line',
              'pause-circle-fill',
              'stop-circle-line',
              'stop-circle-fill',
              'rewind-line',
              'rewind-fill',
              'speed-line',
              'speed-fill',
              'skip-back-line',
              'skip-back-fill',
              'skip-forward-line',
              'skip-forward-fill',
              'repeat-2-line',
            ],
          },
          {
            label: '人物',
            icon: [
              'user-line',
              'user-fill',
              'account-box-line',
              'account-box-fill',
              'user-add-line',
              'user-add-fill',
              'user-follow-line',
              'user-follow-fill',
              'user-unfollow-line',
              'user-unfollow-fill',
              'group-line',
              'group-fill',
              'men-line',
              'men-fill',
              'women-line',
              'women-fill',
              'aliens-line',
              'aliens-fill',
              'bear-smile-line',
              'bear-smile-fill',
              'mickey-line',
              'mickey-fill',
              'criminal-line',
              'criminal-fill',
              'ghost-line',
              'ghost-fill',
              'star-smile-line',
              'star-smile-fill',
              'spy-line',
              'spy-fill',
              '',
            ],
          },
          {
            label: '通讯',
            icon: ['chat-1-line', 'chat-2-line', 'chat-2-fill', 'message-2-line', 'message-2-fill', 'chat-smile-2-line', 'chat-smile-2-fill'],
          },
          {
            label: '企业',
            icon: [
              'mail-line',
              'mail-fill',
              'inbox-archive-line',
              'inbox-archive-fill',
              'reply-line',
              'reply-fill',
              'printer-line',
              'calendar-check-line',
              'profile-line',
              'award-line',
              'at-line',
              'profile-line',
              'bar-chart-horizontal-line',
              'bubble-chart-line',
              'pie-chart-line',
              'line-chart-line',
              'bookmark-line',
              'calendar-line',
              'calendar-check-line',
              'flag-line',
              'links-line',
              'send-plane-line',
              'stack-line',
            ],
          },
          {
            label: '建筑',
            icon: [
              'home-line',
              'home-2-line',
              'home-3-line',
              'home-4-line',
              'home-5-line',
              'home-6-line',
              'home-7-line',
              'home-8-line',
              'home-gear-line',
              'home-wifi-line',
              'home-fill',
              'home-2-fill',
              'home-3-fill',
              'home-4-fill',
              'home-5-fill',
              'home-6-fill',
              'home-7-fill',
              'home-8-fill',
              'home-gear-fill',
              'home-wifi-fill',
              'home-smile-line',
              'home-smile-2-line',
              'home-heart-line',
              'store-2-line',
              'store-2-fill',
              'building-line',
              'building-2-line',
              'building-3-line',
              'building-4-line',
              'hotel-line',
              'community-line',
              'government-line',
              'home-smile-fill',
              'home-smile-2-fill',
              'home-heart-fill',
              'building-fill',
              'building-2-fill',
              'building-3-fill',
              'building-4-fill',
              'hotel-fill',
              'community-fill',
              'government-fill',
              'bank-line',
              'store-line',
              'store-2-line',
              'store-3-line',
              'hospital-line',
              'ancient-gate-line',
              'ancient-pavilion-line',
              'bank-fill',
              'store-fill',
              'store-2-fill',
              'store-3-fill',
              'hospital-fill',
              'ancient-gate-fill',
              'ancient-pavilion-fill',
            ],
          },
        ],
      }
    },
    computed: {},
    created() {},
    methods: {
      translateTitle,
      clickIcon(icon) {
        console.log('icon', icon)
        this.$emit('update:modelValue', icon)
      },
      closeIcon() {
        this.$emit('update:modelValue', '')
      },
    },
  })
</script>
<style scoped>
  :deep() .el-tabs__nav-next,
  :deep() .el-tabs__nav-prev {
    line-height: 25px;
  }
</style>
